<template>
    <div class="app-container" style="height:600px;font-size:15px;">
        <el-row :gutter="20">
            <el-tabs v-model="activeName" type="card" @tab-click="tabHandleClick">
                <el-tab-pane label="就诊信息" name="medicalRecords">
                    <el-form :model="visitInfo" ref="visitInfoForm" size="small" :inline="true" label-width="78px"
                        :rules="visitInfoFormRules">
                        <el-form-item label="就诊日期" prop="createTime">
                            <el-date-picker v-model="visitInfo.createTime" type="datetime" placeholder="就诊日期"
                                style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="归属科室" prop="deptId">
                            <treeselect v-model="visitInfo.deptId" :options="deptOptionsData" :show-count="true"
                                style="width: 240px" placeholder="请选择归属科室" />
                        </el-form-item>
                        <el-form-item label="专病名称" prop="diseaseId">
                            <el-select v-model="visitInfo.diseaseId" placeholder="请选择专病名称" style="width: 240px"
                                @change="getListClassify">
                                <el-option v-for="dict in dict.type.sys_manage_diseases" :key="dict.value"
                                    :label="dict.label" :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="专病分类" prop="diseaseClassifyId">
                            <el-select v-model="visitInfo.diseaseClassifyId" placeholder="请选择专病分类" style="width: 240px">
                                <el-option v-for="item in classifyList" :key="item.diseaseClassifyId"
                                    :label="item.diseaseClassifyName" :value="item.diseaseClassifyId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="专属医生" prop="doctorId">
                            <el-select v-model="visitInfo.doctorId" placeholder="请选择专属医生" style="width: 240px">
                                <el-option v-for="item in doctorList" :key="item.userId" :label="item.userName"
                                    :value="item.userId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="诊断状态" prop="status">
                            <el-select v-model="visitInfo.status" placeholder="请选择诊断状态" style="width: 240px">
                                <el-option v-for="dict in dict.type.sys_diagnosis_status" :key="dict.value"
                                    :label="dict.label" :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="初诊复诊">
                            <el-radio-group v-model="visitInfo.visitStatus" style="width: 240px">
                                <el-radio v-for="item in visitStatusList" :key="item.id" :label="item.id">{{ item.name
                                                                    }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="照片" name="pic">
                    <div v-if="picData.length > 0">
                        <el-row>
                            <el-col :span="4">
                                <el-select v-model="picDataQueryParams.diseaseId" placeholder="请选择专病名称" style="width: 240px"
                                    clearable>
                                    <el-option v-for="dict in dict.type.sys_manage_diseases" :key="dict.value"
                                        :label="dict.label" :value="dict.value"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="3" :offset="1">
                                <el-button type="primary" size="mini" @click="morePics">更多照片</el-button>
                            </el-col>
                        </el-row>
                        <div style="height:400px;overflow-y:scroll">
                            <el-row v-for="item in picData" :key="item.photoId" style="margin-top:15px;">
                                <el-col :span="24">
                                    拍摄时间:{{ item.createTime }} 入库天数:5 照片类型:手机 光照类型:自然光 拍摄者:用户1 <br />
                                    Ai mMASI:5分 霏图评分:5分 医生评分(mMASI): <el-input sizi="mini" style="width:100px"></el-input>
                                    <el-button type="primary" size="mini">保存医生评分</el-button>
                                </el-col>
                                <el-col :span="20" style="display:flex;justify-content:space-between">
                                    <el-image style="width: 200px; height: 200px" :src="baseUrl + item.leftPhotoAddress"
                                        :preview-src-list="srcList" @click="getPicPreviewList(item)">
                                    </el-image>
                                    <el-image style="width: 200px; height: 200px" :src="baseUrl + item.middlePhotoAddress"
                                        :preview-src-list="srcList" @click="getPicPreviewList(item)">
                                    </el-image>
                                    <el-image style="width: 200px; height: 200px" :src="baseUrl + item.rightPhotoAddress"
                                        :preview-src-list="srcList" @click="getPicPreviewList(item)">
                                    </el-image>
                                </el-col>
                            </el-row>

                        </div>
                    </div>
                    <div v-else> 该患者没有相关照片！</div>
                </el-tab-pane>
                <el-tab-pane label="处方" name="plan">
                    <el-row v-for="Mitem in planListArr" :key="Mitem.index" class="plan-row">
                        <div>方案大类:{{ Mitem.planCategoryName }}</div>
                        <div v-for="item in Mitem.sysPatientPlan" :key="item.planId">
                            <el-row>
                                <el-col :span="4">
                                    <span>方案名称:</span>
                                    <el-input size="mini" style="width:150px;color:red" v-model="item.medicalEquipment"
                                        placeholder="请输入方案名称"></el-input>
                                </el-col>
                                <el-col :span="4">
                                    用法:<el-select v-model="item.usageId" placeholder="请选择用法" size="mini"
                                        style="width:150px">
                                        <el-option v-for="dict in dict.type.sys_plan_usage" :key="dict.value"
                                            :label="dict.label" :value="dict.value"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="4">
                                    用量:<el-input size="mini" style="width:150px" v-model="item.dosage"
                                        placeholder="请输入用量"></el-input>
                                </el-col>
                                <el-col :span="4">
                                    单位:<el-select size="mini" style="width:150px" v-model="item.dosageUnit"
                                        placeholder="请选择用量单位">
                                        <el-option v-for="dict in dict.type.sys_dosage_unit" :key="dict.value"
                                            :label="dict.label" :value="dict.value"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="4">
                                    频次:<el-select size="mini" style="width:150px" v-model="item.frequencyId"
                                        placeholder="请选择频次">
                                        <el-option v-for="dict in dict.type.sys_dosage_frequency" :key="dict.value"
                                            :label="dict.label" :value="dict.value"></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="4">
                                    数量:<el-input size="mini" style="width:150px" v-model="item.num"
                                        placeholder="请输入数量"></el-input>
                                </el-col>
                            </el-row>
                        </div>
                    </el-row>
                    <div style="display:flex;justify-content:center">
                        <el-button type="primary" size="mini" @click="addNewPlanClick">新增处方</el-button>
                        <el-button type="primary" size="mini" @click="updatePlanClick">修改处方</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="治疗记录" name="treatmentRecords">
                    <el-row>
                        <el-col :span="6">
                            <el-row
                                style="text-align:center;line-height: 35px;border-bottom: 1px solid black;">治疗处方</el-row>
                            <div style="line-height: 35px;border-bottom: 1px solid black;cursor:pointer"
                                v-for="item in HISList" :key="item.index"
                                :class="item.patientPlanId === activePatientPlanId ? 'redColor' : ''"
                                @click="planClick(item)">
                                {{ item.createTime }} {{ item.medicalEquipment }}
                                {{ item.frequencyIdName }}
                                {{ item.dosage + item.dosageUnitName }}
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <el-form :model="treatmentForm" ref="treatmentForm" size="small" :inline="true"
                                label-width="78px">
                                <el-form-item label="治疗医生" prop="doctorId">
                                    <el-select v-model="treatmentForm.doctorId" placeholder="请选择治疗医生" style="width: 240px"
                                        clearable>
                                        <el-option v-for="item in doctorList" :key="item.userId" :label="item.userName"
                                            :value="item.userId"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="治疗日期" prop="createTime">
                                    <el-date-picker v-model="treatmentForm.createTime" type="datetime" placeholder="治疗日期"
                                        style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="治疗类别" prop="catgory">
                                    <el-select v-model="treatmentForm.treatKindId" placeholder="请选择治疗类别"
                                        style="width: 240px" clearable>
                                        <el-option v-for="dict in dict.type.sys_treatment_type" :key="dict.value"
                                            :label="dict.label" :value="dict.value"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="治疗项目" prop="project">
                                    <el-select v-model="treatmentForm.treatItemId" placeholder="请选择治疗项目"
                                        style="width: 240px" clearable>
                                        <el-option v-for="dict in dict.type.sys_treatment_program" :key="dict.value"
                                            :label="dict.label" :value="dict.value"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="治疗参数" prop="param">
                                    <el-select v-model="treatmentForm.treatParameterId" placeholder="请选择治疗参数"
                                        style="width: 240px" clearable>
                                        <el-option v-for="dict in dict.type.sys_treatment_param" :key="dict.value"
                                            :label="dict.label" :value="dict.value"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="备注">
                                    <el-input v-model="treatmentForm.remark" placeholder="请输入备注" clearable
                                        style="width: 240px" />
                                </el-form-item>
                            </el-form>
                            <el-button type="primary" size="mini" style="display:block;margin:0 auto"
                                @click="addNewTreatmentRecord">
                                保存</el-button>
                            <div style="text-align:center;margin:15px;">治疗记录</div>
                            <div>
                                <el-table :data="treatmentFormList">

                                    <el-table-column label="治疗记录id" align="center" key="treatLogId" prop="treatLogId" />
                                    <el-table-column label="处方日期" align="center" key="createTime" prop="createTime"
                                        width="160">
                                    </el-table-column>

                                    <el-table-column label="处方医生" align="center" key="doctorName" prop="doctorName" />
                                    <el-table-column label="治疗类别" align="center" key="treatKindIdName"
                                        prop="treatKindIdName">
                                    </el-table-column>
                                    <el-table-column label="治疗项目" align="center" key="treatItemIdName"
                                        prop="treatItemIdName" />
                                    <el-table-column label="治疗参数" align="center" key="treatParameterIdName"
                                        prop="treatParameterIdName">
                                    </el-table-column>
                                    <!-- <el-table-column
                                                label="治疗医生"
                                                align="center"
                                                key="doctorIdName"
                                                prop="doctorIdName"
                                            />
                                            <el-table-column
                                                label="治疗日期"
                                                align="center"
                                                key="createTime"
                                                prop="createTime"
                                            >
                                            </el-table-column> -->
                                    <el-table-column label="处方数量" align="center" key="cfnumber" prop="cfnumber">
                                    </el-table-column>
                                    <el-table-column label="剩余数量" align="center" prop="cfrest">

                                    </el-table-column>
                                    <el-table-column label="备注" align="center" prop="remark">

                                    </el-table-column>
                                    <el-table-column label="操作" align="center" width="160"
                                        class-name="small-padding fixed-width">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="text" @click="handleEdit(scope.row)"
                                                v-hasPermi="['system:inquiry:edit']">编辑</el-button>
                                            <el-button size="mini" type="text" @click="handleDel(scope.row)"
                                                v-hasPermi="['system:inquiry:edit']">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <pagination v-show="total > 0" :total="total" :page.sync="treatmentParams.pageNum"
                                    :limit.sync="treatmentParams.pageSize" @pagination="getTreatmentList" />
                            </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="问诊" name="physicianVisits">
                    <el-row style="line-height:30px">
                        填写时间:2022-01-13 填写者:用户1 问诊表单名:问诊表1 <br />
                        问题:皮疹发生多久了? 回答:3月<br />
                        问题:皮疹疼痛吗? 回答:不痛
                    </el-row>
                    <el-row style="line-height:30px">
                        填写时间:2022-02-13 填写者:用户1 问诊表单名:问诊表1 <br />
                        问题:皮疹发生多久了? 回答:3月<br />
                        问题:皮疹疼痛吗? 回答:不痛
                    </el-row>
                    <el-row style="line-height:30px">
                        填写时间:2022-03-13 填写者:用户1 问诊表单名:问诊表1 <br />
                        问题:皮疹发生多久了? 回答:3月<br />
                        问题:皮疹疼痛吗? 回答:不痛
                    </el-row>
                    <el-row style="line-height:30px">
                        填写时间:2022-04-13 填写者:用户1 问诊表单名:问诊表1 <br />
                        问题:皮疹发生多久了? 回答:3月<br />
                        问题:皮疹疼痛吗? 回答:不痛
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="随访" name="followupVisit">
                    <el-row style="line-height:30px">
                        填写时间:2022-01-13 填写者:用户1 随访表单名:随访表1 <br />
                        问题:皮疹发生多久了? 回答:3月<br />
                        问题:皮疹疼痛吗? 回答:不痛
                    </el-row>
                    <el-row style="line-height:30px">
                        填写时间:2022-02-13 填写者:用户1 随访表单名:随访表1 <br />
                        问题:皮疹发生多久了? 回答:3月<br />
                        问题:皮疹疼痛吗? 回答:不痛
                    </el-row>
                    <el-row style="line-height:30px">
                        填写时间:2022-03-13 填写者:用户1 随访表单名:随访表1 <br />
                        问题:皮疹发生多久了? 回答:3月<br />
                        问题:皮疹疼痛吗? 回答:不痛
                    </el-row>
                    <el-row style="line-height:30px">
                        填写时间:2022-04-13 填写者:用户1 随访表单名:随访表1 <br />
                        问题:皮疹发生多久了? 回答:3月<br />
                        问题:皮疹疼痛吗? 回答:不痛
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="曲线" name="curve">
                    <div id="mainCurve" style="width: 600px;height:400px;"></div>
                </el-tab-pane>
                <el-tab-pane label="检验" name="inspection">
                    <div>
                        检验
                    </div>
                </el-tab-pane>
                <el-tab-pane label="检查" name="checkout">
                    <div>
                        检查
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-row>
        <el-dialog :title="planTitle" width="70%" :visible.sync="isNewPlan" append-to-body>
            <plan-page v-if="isNewPlan" :addOrUpdate="addOrUpdate" :planCategoryData="planCategoryData"
                :patientId="visitInfoData.patientId" :visitId="visitInfoData.visitId" @reFreshPlanList="refreshPlan"
                @closePlanPage="closePlanPage"></plan-page>
        </el-dialog>
        <el-dialog title="治疗记录修改" :visible.sync="treatmentDetailOpen" width="700px" append-to-body>
            <el-form :model="treatmentDetailForm" ref="treatmentDetailForm" size="small" :inline="true" label-width="78px">
                <el-form-item label="治疗医生" prop="doctorId">
                    <el-select v-model="treatmentDetailForm.doctorId" placeholder="请选择治疗医生" style="width: 240px" clearable>
                        <el-option v-for="item in doctorList" :key="item.userId" :label="item.userName"
                            :value="item.userId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="治疗日期" prop="createTime">
                    <el-date-picker v-model="treatmentDetailForm.createTime" type="datetime" placeholder="治疗日期"
                        style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="治疗类别" prop="catgory">
                    <el-select v-model="treatmentDetailForm.treatKindId" placeholder="请选择治疗类别" style="width: 240px"
                        clearable>
                        <el-option v-for="dict in dict.type.sys_treatment_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="治疗项目" prop="project">
                    <el-select v-model="treatmentDetailForm.treatItemId" placeholder="请选择治疗项目" style="width: 240px"
                        clearable>
                        <el-option v-for="dict in dict.type.sys_treatment_program" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="治疗参数" prop="param">
                    <el-select v-model="treatmentDetailForm.treatParameterId" placeholder="请选择治疗参数" style="width: 240px"
                        clearable>
                        <el-option v-for="dict in dict.type.sys_treatment_param" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="treatmentDetailForm.remark" placeholder="请输入备注" clearable style="width: 240px" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="treatmentDetailOpen = false">取 消</el-button>
                <el-button type="primary" @click="updateTreatmentDetail">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { listPhotos } from "@/api/patients/patient";
import { listUser, deptTreeSelect } from "@/api/system/user";
import { listClassify } from "@/api/system/classify";
import {
    addressJson,
    findPatient,
    addVisit,
    delVisit,
    addPhoto,
    batchAddPatientPlan,
    delPic,
    listPlanByCategoryId,
    listPlanByVisitId,
    addTreatmentRecord,
    updateTreatmentRecord,
    listLog,
    delTreat,
    listPatientPlan,
} from "@/api/patients/personal";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import PlanPage from "./plan.vue";
import * as echarts from "echarts";
const curveOption = {
    title: {
        text: "评分曲线",
    },
    tooltip: {
        trigger: "axis",
    },
    legend: {
        data: ["霏图评分", "医生评分", "AI评分"],
    },
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    toolbox: {
        feature: {
            saveAsImage: {},
        },
    },
    xAxis: {
        type: "category",
        boundaryGap: false,
        axisLabel: { interval: 0, rotate: 40 },
        data: [
            "2012-11-01",
            "2012-11-07",
            "2012-11-13",
            "2012-11-15",
            "2012-11-21",
            "2012-11-22",
            "2012-11-25",
        ],
    },
    yAxis: {
        type: "value",
    },
    series: [
        {
            name: "霏图评分",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
            name: "医生评分",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
            name: "AI评分",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
        },
    ],
};
export default {
    name: "patientDetail",
    dicts: [
        "sys_plan_category",
        "sys_user_sex",
        "sys_manage_diseases",
        "sys_diagnosis_status",
        "photo_upload_type",
        "photo_lighting_type",
        "sys_dosage_unit",
        "sys_dosage_frequency",
        "sys_plan_usage",
        "sys_treatment_type",
        "sys_treatment_program",
        "sys_treatment_param",
    ],
    props: ["visitInfoData", "deptOptionsData"],
    components: { Treeselect, PlanPage },
    data() {
        return {
            treatmentRecords: [
                { createTime: "2022-01-12", doctor: "专属医生" },
            ],
            baseUrl: process.env.VUE_APP_BASE_API,
            activeName: "medicalRecords",
            // 省市区
            areaList: [],
            visitInfo: {
                createTime: undefined,
                deptId: undefined,
                visitId: undefined,
                diseaseId: undefined,
                diseaseClassifyId: undefined,
                doctorId: undefined,
                status: undefined,
                visitStatus: undefined,
                parentId: null,
            },
            visitInfoFormRules: {
                createTime: [
                    {
                        required: true,
                        message: "就诊日期不能为空",
                        trigger: "blur",
                    },
                ],
                deptId: [
                    {
                        required: true,
                        message: "科室不能为空",
                        trigger: "blur",
                    },
                ],
                diseaseId: [
                    {
                        required: true,
                        message: "专病名称不能为空",
                        trigger: "blur",
                    },
                ],
                diseaseClassifyId: [
                    {
                        required: true,
                        message: "专病分类不能为空",
                        trigger: "blur",
                    },
                ],
                doctorId: [
                    {
                        required: true,
                        message: "专属医生不能为空",
                        trigger: "blur",
                    },
                ],
                status: [
                    {
                        required: true,
                        message: "诊断状态不能为空",
                        trigger: "blur",
                    },
                ],
            },

            //专病分类
            classifyList: [
                { diseaseClassifyId: null, diseaseClassifyName: null },
            ],
            doctorList: [],
            visitStatusList: [
                { id: 1, name: "初诊" },
                { id: 2, name: "复诊" },
            ],
            pictureForm: {},
            pictureFormRules: {
                diseaseId: [
                    {
                        required: true,
                        message: "请选择专病名称",
                        trigger: "blur",
                    },
                ],
            },
            picData: [],
            picDataQueryParams: { diseaseId: null },
            planListArr: [],
            srcList: [],
            saveStatus: false,
            isNewPlan: null,
            addOrUpdate: null,
            planCategoryData: [],
            planTitle: "",
            activePatientPlanId: null,
            treatmentForm: {},
            treatmentFormList: [],
            treatmentParams: { pageNum: 1, pageSize: 10 },
            total: 0,
            HISList: [],
            treatmentDetailOpen: false,
            treatmentDetailForm: {},
        };
    },

    created() {
        this.getAddressData();
        this.getDoctorData();
    },
    async mounted() {
        await this.getListClassify(this.visitInfoData.diseaseId);
        Object.keys(this.visitInfo).forEach((item) => {
            this.visitInfo[item] = this.visitInfoData[item];
        });
    },
    watch: {},
    computed: {},
    methods: {
        morePics() { },
        updateTreatmentDetail() {
            updateTreatmentRecord(this.treatmentDetailForm).then((res) => {
                this.getTreatmentList();
                this.treatmentDetailOpen = false;
                this.$message.success("修改成功");
            });
        },
        handleEdit(row) {
            this.treatmentDetailOpen = true;
            this.treatmentDetailForm = row;
        },
        handleDel(row) {
            this.$modal
                .confirm(
                    '是否确认删除治疗记录id为"' + row.treatLogId + '"的数据项？'
                )
                .then(function () {
                    return delTreat(row.treatLogId);
                })
                .then(() => {
                    this.getTreatmentList();
                    this.$message.success("删除成功");
                })
                .catch(() => { });
        },
        addNewTreatmentRecord() {
            if (this.activePatientPlanId) {
                this.treatmentForm.patientPlanId = this.activePatientPlanId;
                addTreatmentRecord(this.treatmentForm).then((res) => {
                    this.getTreatmentList();
                    this.$message.success("保存成功");
                });
            }
        },
        getHIS() {
            if (this.visitInfoData.patientId) {
                const mData = {
                    patientId: this.visitInfoData.patientId,
                    planCategoryId: "2",
                };
                listPatientPlan(mData).then((res) => {
                    res.rows.forEach((item) => {
                        item.dosageUnitName = this.matchDict(
                            "sys_dosage_unit",
                            item.dosageUnit
                        );
                        item.frequencyIdName = this.matchDict(
                            "sys_dosage_frequency",
                            item.frequencyId
                        );
                    });
                    this.HISList = res.rows;
                });
            } else {
                this.$message.info("没有病人id");
            }
        },
        getTreatmentList() {
            this.treatmentParams.patientPlanId = this.activePatientPlanId;
            listLog(this.treatmentParams).then((res) => {
                console.log(res);
                res.rows.forEach((item) => {
                    item.doctorName = this.matchDoctor(item.doctorId);
                    item.treatItemIdName = this.matchDict(
                        "sys_treatment_program",
                        item.treatItemId
                    );
                    item.treatKindIdName = this.matchDict(
                        "sys_treatment_type",
                        item.treatKindId
                    );
                    item.treatParameterIdName = this.matchDict(
                        "sys_treatment_param",
                        item.treatParameterId
                    );
                });
                this.treatmentFormList = res.rows;
                this.total = res.total;
            });
        },
        planClick(data) {
            this.activePatientPlanId = data.patientPlanId;
            this.getTreatmentList();
        },
        refreshPlan() {
            this.getPlanListByVisitId();
            this.isNewPlan = false;
        },
        closePlanPage() {
            this.isNewPlan = false;
        },
        addNewPlanClick() {
            this.planCategoryData = [];
            listPlanByCategoryId({ diseaseId: this.visitInfo.diseaseId }).then(
                (res) => {
                    this.addOrUpdate = 1;
                    res.data.forEach((item) => {
                        if (item.sysPlans.length > 0) {
                            this.planCategoryData.push(item);
                        }
                    });
                    this.planTitle = "新增方案";
                    this.isNewPlan = true;
                }
            );
        },
        updatePlanClick() {
            this.addOrUpdate = 2;
            this.planCategoryData = [];
            this.planListArr.forEach((item) => {
                item.sysPlans = item.sysPatientPlan;
            });
            this.planCategoryData = this.planListArr;
            this.planTitle = "修改方案";
            this.isNewPlan = true;
        },

        tabHandleClick(tab) {
            if (tab.name === "pic") {
                this.getPhotoList();
            }
            if (tab.name === "plan") {
                this.getPlanListByVisitId();
            }
            if (tab.name === "curve") {
                var curveChart = echarts.init(
                    document.getElementById("mainCurve")
                );
                curveChart.setOption(curveOption);
            }
            if (tab.name === "treatmentRecords") {
                this.getHIS();
            }
        },
        getPhotoList() {
            listPhotos({
                patientId: this.visitInfoData.patientId,
            }).then((res) => {
                if (res.rows.length > 0) {
                    this.picData = res.rows;
                } else {
                    this.picData = [];
                }
            });
        },

        getPlanListByVisitId() {
            this.planListArr = [];
            listPlanByVisitId({ visitId: this.visitInfo.visitId }).then(
                (res) => {
                    res.data.forEach((item) => {
                        if (item.sysPatientPlan.length > 0) {
                            this.planListArr.push(item);
                        }
                    });
                }
            );
        },

        submitPatientForm() {
            this.$refs["patientForm"].validate((valid) => {
                if (valid) {
                    this.patientInfo.provinceId = this.patientInfo.area[0];
                    this.patientInfo.cityId = this.patientInfo.area[1];
                    this.patientInfo.countyId = this.patientInfo.area[2];
                    let mData = this.patientInfo;
                    addPatient(mData).then((res) => {
                        this.$modal.msgSuccess("新增成功");
                    });
                }
            });
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        getPicPreviewList(it) {
            this.srcList = [
                this.baseUrl + it.leftPhotoAddress,
                this.baseUrl + it.middlePhotoAddress,
                this.baseUrl + it.rightPhotoAddress,
            ];
        },
        getDoctorData() {
            listUser({ pageNum: 1, pageSize: 1000, roleId: 101 }).then(
                (res) => {
                    this.doctorList = res.rows;
                }
            );
        },
        getAddressData() {
            addressJson().then((res) => {
                this.areaList = res.data;
            });
        },

        saveBaseInfo() {
            addVisit().then((res) => { });
        },

        getListClassify(value) {
            listClassify({
                pageNum: 1,
                pageSize: 1000,
                diseaseId: Number(value),
            }).then((response) => {
                this.classifyList = response.rows;
            });
        },
        /** id转化成对应的文字 */
        matchDict: function (key, id) {
            let _this = this;
            const result = _this.dict.type[key];
            let textValue = "";
            result.forEach((item) => {
                if (item.raw.dictValue == id) {
                    textValue = item.raw.dictLabel;
                }
            });
            return textValue;
        },
        /** doctorId转化成对应的医生名字 */
        matchDoctor(doctorId) {
            return this.doctorList.find((item) => {
                return item.userId === doctorId;
            }).userName;
        },
    },
};
</script>

<style scoped>
.plan-row {
    margin: 15px 0;
    line-height: 28px;
}

.redColor {
    color: red;
}
</style>